<template>
    <!-- 给一个大的盒子 -->
    <view class="home">
        <!--导航栏 可滚动视图区域 scroll-x允许横向-->
        <scroll-view scroll-x class="navscroll">
            <scroll-view scroll-x class="navscroll">
                <view 
                    class="item" 
                    :class="{active: index === navIndex}" 
                    v-for="(item, index) in navItems" 
                    :key="index"
                    @click="clickNav(index)"
                >
                    {{item}}
                </view>
            </scroll-view>
            
        </scroll-view>
        <!-- 内容 -->
		<view class="content">
        <div class="row">
			<newsbox @click.native="goDetail"></newsbox>
		</div>
		</view>
    </view>
	
</template>

<script>
    export default {
        data() {
            return {
                navIndex:0,
				navItems: ['国内', '国际', '财经', '科技', '体育', '娱乐', '军事', '教育']
            }
        },
        onLoad() {

        },
		
        methods: {
			goDetail(){
			                uni.navigateTo({
			                    url:"/pages/detail/detail"
			                })
			            },
						
			clickNav(index){
				this.navIndex=index;
			}

        }
    }
</script>

<style lang="scss" scoped>
    .home {
        padding: 20rpx;
    }
    
    .navscroll {
        height: 100rpx;
        background: #f7f7f7;
        white-space: nowrap;
        
        /* 使用 ::v-deep 替代 /deep/ */
        ::v-deep ::-webkit-scrollbar {
            display: none;
        }
        
        .item {
            display: inline-block;
            line-height: 100rpx;
            padding: 0 30rpx;
            font-size: 36rpx;
            color: #333;
            
            &.active {
                color: #007AFF;
                font-weight: bold;
            }
        }
    }
    
    .content {
        margin-top: 20rpx;
        
        .row {
            padding: 20rpx;
            border-bottom: 1rpx solid #eee;
        }
    }
</style>